<template>
	<view class="main-cont">
		<view class="content">
			<view class="father" style="background-color: #FFFFFF; border-radius: 18px;">
				<view class="basic">
					<view class="icon">
						<u-avatar :src="icon" mode="circle" size="150"></u-avatar>
					</view>
					<view style="display: flex; justify-content: center;" class="tike">
						<view class="name">{{name}}</view>
						<view class="sel">
						  <span>学生</span> 
						</view>			
					</view>
					<view class="kha">
						<view class="bjname">
							<span>{{classname}}</span>
							<!-- <span>安居房包括把课程</span> -->
						</view>
					</view>	
				</view>
				<view class="txt">
				<text class="t1">{{zxsc}}</text>
				<text class="t2">{{xxkcs}}</text>
				<text class="t3">{{hyd}}</text>
				<text class="t4">{{hzs}}</text>
				<text class="t5">{{sjwcs}}</text>
				<view class="charts">
					<view class="charts-box">
						<mpvue-echarts id="main" ref="mapChart" @onInit="renderLine" />
					</view>
				</view>	
			</view>
			</view>
				<u-button type="primary" open-type="share" :custom-style="customStyle">
					<image src="../../static/share.png" style="width: 48rpx; height: 48rpx;"></image>
					<span>分享</span> 
				</u-button>
	    </view>
	</view>
</template>

<script>
	import * as echarts from '../compoents/echart/echarts.min.js'
	import mpvueEcharts from '../compoents/mpvue-echarts/src/echarts.vue'
	export default {
		components:{
			mpvueEcharts
		},
		data() {
			return {
				customStyle: {
					marginTop:'40rpx',
					width: '624rpx',
					height: '86rpx',
					lineHeight: '86rpx',
					backGround: '#798AFF',
					borderRadius: '43rpx',
				},
				classname:'',
				icon:'',
				name:'',	
	            schoolid:'',
			    userid:'',
		        zxsc:3,
		        xxkcs:3,
		        hyd:3,
		        hzs:3,
		        sjwcs:3	
			}
		},
		onLoad: function(options) {
			//console.log(options)
			this.schoolid=options.schoolid;
			this.userid=options.userid;
			this.getdetails()
		},
		methods: {
			renderLine(e) {
				let {
					canvas,
					width,
					height
				} = e;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				var option={
					"radar": {
						 "axisLine": {
							"lineStyle": {
								// "color": "black"
								"width": 1
							}
						 },
						"indicator": [{
								"max": 600,
								"name":'总学习时长'
							},
							{
								"max": 100,
								"name": '学习课程数'
							},
							{
								"max": 100,
								"name": "活跃度"
							},
							{
								"max": 1000,
								"name": '获赞数'
							},
							{
								"max": 100,
								"name": '实践完成数'
							}
						],
						 //图表文字大小
						"axisName": {
								"color": "#5F6572",
								"fontSize": 12,
								"fontStyle":'normal',
								"fontFamily":'PingFang SC',
						},
						//指示器与轴的距离
						"nameGap":3,
						"splitLine": {
							"lineStyle": {
								"width": 1
							}
						},
						"splitNumber": 5,
					},
					"series": [{
						//给数据设置填充色
						"areaStyle": {
							"color": "#FF5A77",
							"opacity": 0.2,
						},
						//图表数据
						"data":[{
							 symbol: "circle",
							 symbolSize: 4,
							 value:[this.zxsc,this.xxkcs,this.hyd,this.hzs,this.sjwcs]
						}],	
						//数据的边框色
						"lineStyle": {
							"width": 1,
							'color':'#FF5A77'
						},
						"type": "radar",
						itemStyle:{//折线拐点标志的样式
							borderColor:"#FF5A77",//拐点的边框颜色
							borderWidth:3.5
						},
					}],
					"xAxis": {
						"show": false
					},
					"yAxis": {
						"show": false
					}
				}
				chart.setOption(option);
			},
             getdetails(){
				 let params={
					 schoolid:this.schoolid,
					 userid:this.userid
				 }
				  this.$api.post({url:'/dteacher/studesc'},params).then(res=>{
					  //console.log(res)
					  if(res.code==0){
						  this.list=res.list;
						  this.icon=res.desc.icon;
						  this.name=res.desc.name;
						  this.classname=res.desc.classname;
						  let looked=res.desc.looked.substring(0,1)
						  // //console.log(looked)
						  this.zxsc=looked;
						   this.xxkcs=res.desc.couscnt;
						   this.hyd=res.desc.hyd;
						   this.hzs=res.desc.hzs;
						   this.sjwcs=res.desc.sjcnt;	
					 }
				  })
			 }
			
		}
	}
</script>

<style scoped lang="scss">
	   .charts {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		/* 雷达图父容器 */
		.charts-box {
		  margin-top: 70rpx;
		  width: 710rpx;
		  height:520rpx;
		}
	.t1,.t2,.t3,.t4,.t5{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
        width: 140rpx;
        text-align: center;
	}
	.txt{
		width: 710rpx;
		height:550rpx;
		position: relative;
		>.t1{
			color: #00CB7B;
			position: absolute;
			top:60rpx;
			left:290rpx;
		}
		>.t2{
			position: absolute;
			top:275rpx;
			left:36rpx;		
            color: #5893F7;
		}
		>.t4{
			position: absolute;
			bottom:15rpx;
			right:130rpx;	
			color: #F97762;
		}
		>.t3{
			position: absolute;
			bottom: 15rpx;
			left:130rpx;
			color: #F97762;
		}
		>.t5{
			position: absolute;
			right:35rpx;
			top:275rpx;	
			color: #5893F7;
		}
		}
	.father{
	  height: 900rpx;
	}
	.basic{
		width: 710rpx;
	    text-align: center;
		color:#181623;
		margin: 0 auto;
		border-bottom: 1px solid #E5E5E5;
		>.kha{
			display: flex;
			width:710rpx;
			justify-content:center;
			>.bjname{		
				color:#5F6572;
				font-size: 26rpx;
				margin-bottom: 10rpx;
				>span{
					display: block;
				}
			}
		}
		
	}
	.tike{
		padding-top: 20rpx;
		padding-left:70rpx;
		>.name{
			font-size: 36rpx;
		}
		>.sel{
		margin-top: 10rpx;
		width: 77rpx;
		height: 36rpx;
		color:#FFFFFF;
		background: #7686F6;
		border-radius: 18px;
		
	}
	}
	
	.icon{
		margin:  0 auto;
		margin-top: -60rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
	}
   

	.main-cont {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(https://yh-sys.oss-cn-beijing.aliyuncs.com/6B9AF39796704A5CB130FC9C0CFB7A28icon_bg.png?Expires=4799124463&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=3z2ea85buEEsjoSlp5uw2FIOMoo%3D) no-repeat;
		background-size: 100%;
		color: #fff;
		background-color: #888bf3;
	}

	
</style>
